<template>
  <div>
    <van-popup v-model="popupShow" round position="bottom">
      <div class="payGoodsBox">
        <div class="realPay">
          <p>实付金额</p>
          <p class="txt2">￥{{earnest}}</p>
        </div>
        <div class="payGoodsContent">
          <p class="txt9">选择支付方式</p>
          <van-radio-group v-model="payType">
            <van-cell-group>
              <van-cell clickable @click="payType = '1'">
                <template #title>
                  <img src="@/assets/img/goods/icon_zhifubao@2x.png" alt class="payIcon" />
                  <span class="custom-title">支付宝支付</span>
                </template>
                <template #right-icon>
                  <van-radio name="1" checked-color="#00C8E7" />
                </template>
              </van-cell>
              <!-- <van-cell clickable @click="payType = '2'">
                <template #title>
                  <img src="@/assets/img/goods/icon_bao@2x.png" alt class="payIcon" />
                  <span class="custom-title">其他支付</span>
                </template>
                <template #right-icon>
                  <van-radio name="2" checked-color="#00C8E7" />
                </template>
              </van-cell> -->
            </van-cell-group>
          </van-radio-group>
        </div>
      </div>
      <div class="payhandlerBtn">
        <p class="handlerBtn handlerBtn2" @click="placeAnOrderFunc" >支付￥{{earnest}}</p>
      </div>
    </van-popup>
  </div>
</template>

<script>
import selfFunc from '@/utils/common.js'
export default {
  data() {
    return {
      popupShow: false,
      payType:'1',
      goodsDetail:{},
      earnest:0,
      orderId:'',
    };
  },
  created() {
  
  },
  methods: {
    payInfoFunc(info){
        this.goodsDetail = info
        this.earnest = this.$selfFunc.toNonExponential(this.goodsDetail.earnestMoneyPercentage*this.goodsDetail.orderQuantity,2)
    },
    placeAnOrderFunc:selfFunc.throttle(async function(){
      let res = await this.$http.placeAnOrder({goodsId:this.goodsDetail.goodsId,orderRemark:this.goodsDetail.orderRemark,orderQuantity:this.goodsDetail.orderQuantity});
        if (res) {
          if (typeof(res.data) == 'string'&&res.data.indexOf('realStatus')>-1) {
            this.$toast('请先实名认证在购买')
            setTimeout(()=>{
              this.$router.push({name:'myAuthentication'})
            },800)
            return
          }
          this.orderId =res.data.orderId
          this.orderAliPayFunc(this.orderId)
        }
    },1500),
    async orderAliPayFunc(orderId){
        let res = await this.$http.orderAliPay({orderId:orderId});
        if (res) {
          let orderInfo =res.data
          this.payFunc(orderInfo)
        }
    },
    payFunc(orderInfo){
      let self = this
      var aliPayPlus = api.require('aliPayPlus');
      aliPayPlus.payOrder({
          orderInfo: orderInfo
      }, function(ret, err) {
        if(ret.code==9000){
          //9000：支付成功
          setTimeout(()=>{
            self.go('myOrderDetail')
          })
        } else if(ret.code==8000){
          self.$toast("正在处理中");
        } else if(ret.code==4000){
          setTimeout(()=>{
            self.go('myOrderDetail')
          })
        } else if(ret.code==5000){
          self.$toast("重复请求");
        } else if(ret.code==6001){
          //6001：用户中途取消支付操作
          setTimeout(()=>{
            self.go('myOrderDetail')
          })
        } else if(ret.code==6002){
          self.$toast("网络连接出错");
        } else if(ret.code==6004){
          self.$toast("正在处理中");
        }
      });
    },
    go(name) {
      this.$router.push({ name: name ,query:{orderId:this.orderId,goodsId:this.goodsDetail.goodsId}});
    }
  }
};
</script>
<style>
.payGoodsContent .van-cell{
  padding: 10px 0;
}
.payGoodsContent .van-cell::after{
  left: 0;
  right: 0;
}
</style>
<style scoped>
.payGoodsBox {
  padding: 0.4rem 0;
}
.txt9 {
  font-weight:600;
  margin-bottom: 0.3rem;
}
.realPay{
  text-align: center;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid #F5F3F3;
}
.txt2{
  font-size: 0.4rem;
  font-weight: 600;
  margin-top: 0.12rem;
}
.payhandlerBtn {
  padding: 0 0.28rem;
  margin: 0.76rem 0 0.68rem;
}
.payGoodsContent{
  padding: 0.4rem;
}
.handlerBtn {
  width: 3.26rem;
  height: 0.82rem;
  line-height: 0.82rem;
  border-radius: 0.41rem;
  text-align: center;
  color: #fff;
  font-size: 0.34rem;
  background: #f6741f;
}

.handlerBtn2{
  width: 100%;
  height: 0.94rem;
  line-height: 0.94rem;
}
.payIcon{
  width: 0.4rem;
  height: 0.4rem;
  margin-right: 0.08rem;
  vertical-align: middle;
}
</style>
